import ChatContainer from "@/component/ChatContainer"
import React, { useEffect, useState } from "react"
import { withSocket } from "./useSocket"
import Page from "@/layout/Page"
const withGame = (
    Component: (props: {
        message: any
        send: (data: any) => void
        close: () => void
    }) => JSX.Element,
    playerNumber: number
) => {
    const result = withSocket(({ message, send, close }) => {
        const [chat, setChat] = useState<any[]>([])
        useEffect(() => {
            if (message.command === "chat") {
                const { pid, msg } = message
                setChat([{ pid, msg }, ...chat])
            }
        }, [message])
        return (
            <Page>
                <ChatContainer chat={chat} sendMsg={send} />
                <Component send={send} close={close} message={message} />
            </Page>
        )
    }, playerNumber)
    return result
}
export default withGame